<template>
    <div class="form">
        <el-form :model="form">
            <el-form-item label="车辆编号" :label-width="formLabelWidth">
                <el-input v-model="form.vehicleId" autocomplete="off" />
            </el-form-item>
            <el-form-item label="车牌号" :label-width="formLabelWidth">
                <el-input v-model="form.licensePlate" autocomplete="off" />
            </el-form-item>
            <el-form-item label="车辆状态" :label-width="formLabelWidth">
                <el-select v-model="form.status" placeholder="车辆状态" clearable>
                    <el-option v-for="status in VehicleStatus" :key="status.code" :label="status.label"
                        :value="status.code" />
                </el-select>
            </el-form-item>
            <el-form-item label="驾驶员" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="行程编号" :label-width="formLabelWidth">
                <el-select v-model="form.tripNumber" placeholder="请选择驾驶路线">
                    <el-option v-for="route in routes" :key="route.id" :label="route.tripNumber" :value="route.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="车辆型号" :label-width="formLabelWidth">
                <el-select v-model="form.type" placeholder="请选择车辆型号">
                    <el-option v-for="route in VehicleType" :key="route.id" :label="route.type" :value="route.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="购买日期" :label-width="formLabelWidth">
                <el-date-picker v-model="form.buyDate"  placeholder="选择日期" 
                />
            </el-form-item>
            <el-form-item label="保养日期" :label-width="formLabelWidth">
                <el-date-picker v-model="form.maintenanceDate" placeholder="选择日期" 
                />
            </el-form-item>
        </el-form>
    </div>
    <div class="dialog-footer">
        <el-button @click="returnPage" type="warning">返回界面</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="add">确认添加</el-button>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { VehicleStatus } from '../../utils/status';
import { ElMessage } from 'element-plus';
import { travelRoute, TypeList, addListener } from '../../api/service.js'

const router = useRouter();

const formLabelWidth = '80px'

const form = reactive({
    vehicleId: '',
    licensePlate: '',
    status: '',
    name: '',
    tripNumber: '',
    buyDate: '',
    maintenanceDate: '',
    type: ''
})


const reset = ()=>{
    form.vehicleId = '',
    form.licensePlate = '',
    form.status = '',
    form.name = '',
    form.travelRoute = '',
    form.buyDate = '',
    form.maintenanceDate =  '',
    form.type = ''
}

const routes = ref([])
const VehicleType = ref([])

const getRoutes = async()=>{
    try{
        const result = await travelRoute();
        if(result.data.code === 200){
            routes.value = result.data.data
        }
        // console.log('result.data.data')
    }catch(error){
        ElMessage.error("获取行驶路线错误")
    }
}

const getType = async()=>{
    try{
        const result = await TypeList();
        if(result.data.code === 200){
            VehicleType.value = result.data.data;
        }
    }catch(error){
        ElMessage.error("类型错误")
    }
}

const add = async()=>{
    // console.log(form)
    // console.log(form.buyDate)
    try{
        const result = await addListener(form);
        if(result.data.code === 200){
            ElMessage.success(result.data.msg ? result.data.msg : '添加成功');
            reset();
            router.push('/vehicle');
        }else{
            ElMessage.error(result.data.msg ? result.data.msg : '添加失败'),
            reset()
        }
    }catch(error){
        ElMessage.error('请检查填入信息，添加失败')
    }
}

const returnPage = () => {
    router.push("/vehicle")
}

onMounted(()=>{
    getRoutes(),
    getType()
})
</script>

<style scoped>
.form {
    width: 55%;
    margin: 0 auto;
}

.el-form-item {
    margin-top: 30px;
}

.dialog-footer {
    /* border: 1px solid slateblue; */
    width: 55%;
    margin: 0 auto;
    margin-top: 20px;
}

.el-button {
    float: right;
    margin-left: 20px;
}
</style>